<template>
  <div>
    <el-form :model="obj" label-width="auto" style="max-width: 600px">
      <el-form-item label="组件名称">
        <el-input v-model="obj.title" />
      </el-form-item>
      <el-form-item label="绑定字段">
        <el-input v-model="obj.key" />
      </el-form-item>
      <el-form-item label="栅格">
        <el-slider v-model="obj.props.span" :min="1" :max="24" />
      </el-form-item>
      <el-form-item label="必填">
        <el-switch v-model="obj.valite"></el-switch>
      </el-form-item>
      <component :is="obj.type" :obj></component>
    </el-form>
  </div>
</template>

<script lang="ts">
import inputView from './config/inputConfig.vue'
import uploadView from './config/uploadConfig.vue'
import selectView from './config/selsectConfig.vue'
import datepickerView from './config/dataPickerConfig.vue'
import divConfig from './config/divConfig.vue'
export default {
  name: 'atomConfig',
  components: {
    inputView,
    uploadView,
    selectView,
    datepickerView,
    divConfig
  }
}
</script>

<script lang="ts" setup>
import { toRefs, defineProps } from 'vue'
import { type Basis } from '@/types/element'
const props = defineProps<{
  obj: Basis
}>()

const { obj } = toRefs(props)
</script>

<style scoped></style>
